    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单小米案例显示价格</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                height: 1000px;
                width: 1000px;
                margin: 100px auto;
            }
            item{
                height: 311px;
                width: 150px;
                border: 2px solid #aa453b;
                float: left;
                margin-right: 20px;
                position: relative;
                overflow: hidden;
            }
            item li{
                list-style: none;
            }
            span{
                display: block;
                height: 100px;
                width: 150px;
                margin-top: -4px;
                background-color: #f5ff21;
                bottom: -100px;
                position: absolute;
                transition: all 0.5s;
            }
            item:hover span{
                bottom: 0;

            }
            item:hover{
                box-shadow: 6px 6px 3px 3px rgba(11, 16, 226, 0.6);
                margin-top: -5px;
            }
        </style>
    </head>
    <body>
    <div>
        <item>
            <li><img src="img/wjs.jpg" alt=""></li>
            <span></span>
        </item>
        <item>
            <li><img src="img/wjs.jpg" alt=""></li>
            <span></span>
            </item>
        <item>
            <li><img src="img/wjs.jpg" alt=""></li>
            <span></span>
        </item>
    </div>
    </body>
    </html>